<template>
  <!-- v-bind="$attrs" 为子元素绑定除已接收属性之外的其他属性，如事件 -->
  <!-- 直接渲染已经有的svg -->
  <IconifyIcon
    :class="svgClass"
    :icon="iconName"
    v-if="!isExt"
    v-bind="$attrs"
  ></IconifyIcon>
  <!-- 请求 -->
  <div
    v-if="isExt && svgContent"
    v-html="svgContent"
    :class="svgClass"
    v-bind="$attrs"
  ></div>
  <!--请求不成功用 mask渲染外部链接的svg -->
  <div
    v-if="isExt && !svgContent"
    :style="styleExternalIcon"
    :class="svgClass"
    v-bind="$attrs"
  ></div>
</template>
<script setup lang="ts">
import { isExternal } from "@/utils/validate"
import { Icon as IconifyIcon } from "@iconify/vue"
import axios from "axios"
const { iconName, customClass, iconColor } = defineProps({
  iconName: {
    type: String,
    default: ""
  },
  customClass: {
    type: String,
    default: ""
  },
  iconColor: {
    type: String,
    default: ""
  }
})
// 判断是否是外联svg
const isExt = computed(() => isExternal(iconName))
// class="customClass + icon"
// 组合成的类名
const svgClass = computed(() => (customClass ? `icon ${customClass}` : "icon"))
// 外链渲染：通过mask 渲染svg 图标 兼容性不好，可以通过请求svg的方式来渲染
const styleExternalIcon = computed(() => ({
  mask: `url(${iconName}) no-repeat 50% 50%`,
  "-webkit-mask": `url(${iconName}) no-repeat 50% 50%`,
  "mask-size": "cover"
}))
const svgContent = ref("")
const loadSVG = async () => {
  axios
    .get(iconName, {
      responseType: "text"
    })
    .then((res) => {
      let svgText = res.data
      const updatedSvgText = setSvgFillColor(svgText, iconColor)
      svgContent.value = updatedSvgText
    })
    .catch(() => {})
}
// 请求的改颜色需改fill属性
const setSvgFillColor = (svgText: string, color: string) => {
  // 使用正则表达式找到并替换 fill 属性
  return svgText.replace(/fill="[^"]*"/g, `fill="${color}"`)
}
onMounted(() => {
  loadSVG()
})
</script>
<!-- 在实现图标的时候 尽量采用svg， 不要采用font图标 -->
<style scoped lang="scss">
.icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  height: 30px;
  width: 30px;
}
</style>
